﻿function shadowme() {

	demoDiv=document.getElementById("demo");
	demoContainerDiv=document.getElementById("demo-container");
	codeDiv=document.getElementById("code");
	textColor=document.getElementById("t-color").value;
	backgroundColor=document.getElementById("b-color").value;	
	demoBackgroundColor=document.getElementById("c-color").value;	
	
	var theShadow="";
	var shadowHOffset="";
	var shadowVOffset="";
	var shadowBlur="";
	var shadowColor="";
	
			
			shadowHOffset=document.getElementById("h-length-value").innerHTML;
			shadowVOffset=document.getElementById("v-length-value").innerHTML;
			shadowBlur=document.getElementById("b-length-value").innerHTML;
			shadowColor=document.getElementById("s-color").value;
			
			if (theShadow==""){
				theShadow= shadowHOffset + " " + shadowVOffset + " " + shadowBlur + " " + shadowColor;
			}
				
	
	if (demoDiv) {
			demoDiv.style.backgroundColor=backgroundColor;				
			demoContainerDiv.style.backgroundColor=demoBackgroundColor;		
			demoDiv.style.color=textColor;
			demoDiv.style.webkitBoxShadow=theShadow;
			demoDiv.style.MozBoxShadow=theShadow;
			demoDiv.style.boxShadow=theShadow;

			if(codeDiv.innerText){
				codeDiv.innerText="box-shadow:" + theShadow + ";";
				}
			else {
				codeDiv.textContent="box-shadow:" + theShadow + ";";
				}

			}
	}


window.onload=shadowme;